<template>
  <div class="box">
    <h2>子组件 sub</h2>
    从vuex中获取的值: <label>{{count}} --- {{car}}</label>
    <!-- 错误的修改数据方法 -->
    <!-- <button @click="$store.state.count++">测试</button> -->
    <br>
    <button @click="subCount">值-1</button>
  </div>
</template>

<script>
// mapState  用于帮用户快速创建计算属性
import { mapState, mapMutations } from 'vuex'
export default {
  name: 'SubItem',
  computed: {
    ...mapState(['count', 'car'])
  },
  methods: {
    // mapMutations 用于帮用户快速创建函数 使用在methods中
    ...mapMutations(['subCount'])
    // subCount () {
    //   this.$store.commit('subCount')
    // }
  }
}
</script>

<style lang="css" scoped>
.box{
  border: 3px solid #ccc;
  width: 400px;
  padding: 10px;
  margin: 20px;
}
h2 {
  margin-top: 10px;
}
</style>
